<template>
    <div>
        <button @click="handleBack">返回</button>
        列表详情页
        <h2>猜你喜欢</h2>
        <ul>
            <li @click="handleClick">电影1</li>
        </ul>
    </div>
</template>

// <script>
// export default {
//     mounted() {
//         // 注意 this.$route是当前匹配到的动态路由 不带'r'
//         console.log('接收参数', this.$route.params.myid);
//         //  this.$route.params   hash方式动态路由 路由配置/:myid  url以#号拼接   返回的是一个对象,对象中包含配置路由时取的变量
//         // console.log('query传参', this.$route.query.myid);
//         // this.$route.query   query传参,路由配置不需要二级路由 url以?号拼接  返回的是一个对象,对象中包含配置路由时取的变量

//         // 拿到参数后就可以拿着参数请求后端接口了
//     },
//     methods: {
//         handleBack() {
//             // 返回上一级
//             // this.$router.go(-1);
//             this.$router.back();

//         },
//         handleClick() {
//             this.$router.push(`/detail/6789`)
//         }
//     },
//     // watch: {
//     //     "$route.params": function(){
//     //         console.log('接收猜你喜欢传来的参数', this.$route.params.myid);
//     //     }
//     // }

//     beforeRouteUpdate(to, from, next) {
//         //  在当前路由改变,但是该组件被复用时调用, 可以访问this
//         console.log('当前路由改变时调用', this.$route.params.myid ,to.params.myid);
//     },
// }
// </script>

<script setup>
import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router'
import { onMounted } from "vue"
const route = useRoute()
const router = useRouter()
onMounted(() => {
    console.log('接收参数', route.params.myid); 
})
const handleBack = () => {
    router.back();
}
const handleClick = () => {
    router.push(`/detail/6789`)
}
onBeforeRouteUpdate(() => {
    console.log('当前路由改变时调用', route.params.myid,route.params.myid);
})
</script>